<!-- 视图背景 -->

<template>
  <div v-bind="transProps">
    <div v-bind="scaleProps">
      <div v-bind="rotateProps">
        <img ref="map" v-bind="mapProps" @load="onLoadImg" />

        <slot />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewBackground',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixInfo('map', 'map_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      readyImg: false, // 图片就绪
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 偏移属性
     */
    transProps() {
      const { transX = 0, transY = 0 } = this.$parent
      const transform = `translate(${transX}px, ${transY}px)`
      return { class: 'Secure-MapView-trans', style: { transform } }
    },

    /**
     * 缩放属性
     */
    scaleProps() {
      const { transProps, $parent: { scale = 1 } } = this
      const transform = `scale(${scale})`
      return { class: `${transProps.class}-scale`, style: { transform } }
    },

    /**
     * 旋转属性
     */
    rotateProps() {
      const { scaleProps, $parent: { rotate = 0 } } = this
      const transform = `rotate(${rotate}deg)`
      return { class: `${scaleProps.class}-rotate`, style: { transform } }
    },

    /**
     * 地图属性
     */
    mapProps() {
      const { map_info, readyImg } = this
      return {
        src: CORE.image(map_info.fileUrl),
        style: { opacity: readyImg ? 1 : 0 },
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听信息就绪
     */
    map_readyInfo(ready) {
      if (ready) this.resize()
    },

    /**
     * 监听图片路径
     */
    'map_info.fileUrl'(newUrl, oldUrl) {
      if (newUrl !== oldUrl) this.readyImg = false
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    window.addEventListener('resize', this.resize)
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 改变尺寸
     */
    resize() {
      const { view } = this.$parent.$refs
      const { map } = this.$refs
      const { width, height, top, left } = view.getBoundingClientRect()

      const viewX = left + width / 2 | 0 // 视图中心 X 值
      const viewY = top + height / 2 | 0 // 视图中心 Y 值
      const viewW = view.clientWidth // 视图宽度
      const viewH = view.clientHeight // 视图高度
      const mapW = map.clientWidth // 地图宽度
      const mapH = map.clientHeight // 地图高度

      const widthMultiple = viewW / mapW // 宽度倍数
      const heightMultiple = viewH / mapH // 高度倍数

      const method = this.cover ? 'max' : 'min'
      const initScale = Math[method](widthMultiple, heightMultiple) // 初始缩放
      const SCALE = []

      if (initScale < 1) {
        const NUM_LIST = [ // 在初始缩放的基础上可放大的倍数列表
          ...Array(11).fill().map((_, i) => (100 + 5 * i) / 100), // [1, 1.05, 1.1, ..., 1.4, 1.45, 1.5]
          ...Array(5).fill().map((_, i) => (16 + i) / 10), //        [1.6, 1.7, 1.8, 1.9, 2.0]
          ...Array(10).fill().map((_, i) => (22 + 2 * i) / 10), //   [2.2, 2.4, 2.6, 2.8, 3.0, 3.2, 3.4, 3.6, 3.8, 4.0]
          ...Array(12).fill().map((_, i) => (45 + 5 * i) / 10), //   [4.5, 5.0, 5.5, 6.0, ... , 8.0, 8.5, 9.0, 9.5, 10]
          ...Array(45).fill().map((_, i) => 12 + 2 * i), //          [12, 14, 16, 18, 20, ..., 90, 92, 94, 96, 98, 100]
        ]
        NUM_LIST.some((num) => {
          const nearInit = CORE.mul(initScale, num) > 0.96
          if (!nearInit) SCALE.push(num)
          return nearInit
        })
      }

      this.$emit('loaded', { viewX, viewY, viewW, viewH, mapW, mapH, initScale, SCALE })
    },

    /**
     * 图片加载完成
     */
    onLoadImg() {
      this.resize()
      this.readyImg = true
    },
  },
}
</script>
